<!--
  Generated template for the BuycarPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar color="light">
    <ion-title>购物车</ion-title>
    <ion-buttons end (click)="activationCLI()" *ngIf="a== false">
      <button ion-button>
        管理
      </button>
    </ion-buttons>

    <ion-buttons end (click)="activationokCLI()" *ngIf="a == true">
      <button ion-button>
        完成
      </button>
    </ion-buttons>

  </ion-navbar>

</ion-header>


<ion-content #buycarContainer>
  <!-- <div class="delete" *ngIf="activation2==true" (click)="activation?null:cancelCollectNailAPI()"> -->
  <div class="delete" *ngIf="activation2==true" (click)="check()">
    <span>删除</span>
  </div>
  <ion-list>
    <ion-item *ngFor="let item of Buycarlist ;let i=index" class="shopStyle">
      <ion-item class='shopTitle'>
        <!-- <img src="{{item.selectimg}}" class="imgcoll" *ngIf="activation==true" (click)="selectCLI(i)"> -->
        <img src="{{item.selectimg}}" class="imgcollShopName" (click)="selectCLI(i)"> 
        <ion-avatar item-left style="margin-left:42px">
          <img src="{{picrooturl}}{{item.shop_logo}}" alt="">
        </ion-avatar>
        <span>{{item.shop_name}}11111</span>
        <img src="assets/img/22221@2x.png" class="back">
      </ion-item>
      <ion-item *ngFor="let val of item.goods_info;let a=index" class="goods">

        <!-- <ion-checkbox color='red'></ion-checkbox>  -->
        
        <!-- <img src="{{item.selectimg}}" (click)="activation?selectCLI(i):null" class="imgcoll" *ngIf="activation==true">  -->
        <img src="{{val.selectimg}}" (click)="selectCLI(i,a)" class="imgcoll">  
        <ion-thumbnail item-left style="margin-left:42px;">
          <!-- <img src="../../../assets/img/selectno1.png" class="imgcoll" *ngIf="activation==true" style="width:20px;height:20px;">
                        <img src="../../../assets/img/selectok.png" class="imgcoll2" *ngIf="activationn==true" style="width:20px;height:20px;" (click)="check(val.id)"> -->
          <img src="{{picrooturl}}{{val.goods_pic}}" alt="">
        </ion-thumbnail>

        <!--右边的商品详细信息 -->
        <div *ngIf="item.shop_id!=shopID">
          <p style="color:black;font-size:1.4rem;margin:5px 0;width:125px;">{{val.goods_name}}</p>

          <!-- 编辑按钮 -->
          <img src="assets/img/编辑(1)@2x.png" alt="" style="position:absolute;right:10px;top:5px;width:20px;height:20px;" (click)="b(item.shop_id);$event.stopPropagation()">
          <span class="lose" style="background:#FF3334;color:white;border-radius:17px;">到店</span>
          <span class="lose">7天后失效</span>
          <div style="margin-bottom:5px;">
            <span class="new">￥{{val.service_info.service_price}}</span>
            <span class="old">￥{{val.service_info.market_price}}</span>
          </div>
          <span class="num">x{{val.goods_num}}</span>
        
        </div>

        <!-- 编辑数量 -->
        <div class="another" *ngIf="item.shop_id==shopID">
          <div class="left">
            <span (click)="reduce(item.shop_id,a,val.goods_num);$event.stopPropagation()">-</span>
            <i>{{val.goods_num}}</i>
            <span (click)="add(item.shop_id,a);$event.stopPropagation()">+</span>
            <div class="store">
              到店
              <img src="assets/img/arrow.png" alt="">
              <!-- <div>
                <p>到店</p>
                <p>上门</p>
              </div> -->
            </div>
            <!-- <ion-item>

                            <ion-label>Gender</ion-label>
                            <ion-select [(ngModel)]="gender">
                              <ion-option value="f">Female</ion-option>
                              <ion-option value="m">Male</ion-option>
                            </ion-select>
                          </ion-item> -->

          </div>
          <div class="right">
            <div class="complish" (click)="complish(index);$event.stopPropagation()">完成</div>
          </div>
        </div>

       

      </ion-item>
    </ion-item>

<div class="bthg"></div>

  </ion-list>
  <ion-footer>
    <div class="footer-bar">
      <div class="footer-bar-left" (click)="selectCLI()">
        <span *ngIf="!showSelectImg" style="margin-left: 3.8rem;">
          <img src="assets/img/selectno1.png" style="top:1.3rem" class="imgcoll"> 全选</span>
        <span *ngIf="showSelectImg" style="margin-left: 3.8rem;">
          <img src="assets/img/selectok.png" style="top:1.3rem" class="imgcoll"> 全选</span>
      </div>

      <div class="footer-bar-right">
        <div style="
        background: transparent;
        color: #666;
        margin-right: 10px;
        float: left;">
          合计：
          <span style="color:red;">￥{{total}}.00</span>
        </div>
        <div (click)="toOrderPage()"
         style=" width: 60px;
        height: 100%;
        float: right;
        background: #FF5D5B;"> 结算</div>
      </div>
    </div>
  </ion-footer>


      <span class="blank" *ngIf="blank">

        <img src="assets/img/Comment/konggouwuche@2x.png" alt="">
        购物车竟然是空的呀
      </span>
</ion-content>
